<template>
  <view class="content">
    <!-- 泉州风光卡片 -->
    <view class="card">
      <text class="card-title">泉州风光</text>
      <view class="swiper-wrap" style="padding: 30rpx;">
        <swiper
          circular
          indicator-dots
          autoplay
          interval="5000"
          duration="500"
        >
          <swiper-item v-for="(img, index) in imgs" :key="index">
            <image :src="img" class="swiper-img" mode="widthFix" />
          </swiper-item>
        </swiper>
      </view>
    </view>

    <!-- 泉州介绍卡片 -->
    <view class="card">
      <text class="card-title">泉州介绍</text>
      <text class="card-subtitle">海上丝绸之路起点 - 泉州</text>
      <view class="intro-section" v-for="(item, index) in introList" :key="index">
        <text class="section-title">{{ item.title }}:</text>
        <text class="section-content">{{ item.content }}</text>
      </view>
    </view>

    <!-- 探索进度卡片 -->
    <view class="card">
      <text class="card-title">探索进度</text>
      <text class="progress-info">当前进度: {{ progress }}%</text>
      <view class="progress-row">
        <progress :percent="progress" activeColor="#007AFF" />
        <text class="percent-text">{{ progress }}%</text>
      </view>
    </view>

    <!-- 选择城市卡片 -->
    <view class="card">
      <text class="card-title">选择城市</text>
      <view class="city-content">
        <!-- 省市区三级联动选择器 -->
        <picker 
          mode="multiSelector" 
          :range="cityRange" 
          :value="selectedIndexes" 
          @change="handlePickerChange"
          @columnchange="handleColumnChange"
          class="city-picker"
        >
          <view class="picker-display">
            {{ selectedProvince }} -- {{ selectedCity }} -- {{ selectedDistrict }}
          </view>
        </picker>
      </view>
    </view>

    <!-- 泉州宣传卡片 -->
    <view class="card">
      <text class="card-title">泉州宣传</text>
      <view class="video-wrap">
        <video
          :src="videoUrl"
          controls
          :poster="videoPoster"
          class="video"
        ></video>
      </view>
      <view class="audio-wrap">
        <text class="audio-title">泉州背景音乐</text>
        <button class="play-btn" @click="toggleAudio">{{ isPlaying ? '暂停' : '播放' }}</button>
        <text class="audio-desc">泉州南音 - 泉州传统乐曲</text>
        <progress :percent="audioProgress" stroke-width="4" />
      </view>
    </view>

    <!-- 偏好设置卡片 -->
    <view class="card">
      <text class="card-title">偏好设置</text>
      <view class="setting-item">
        <text class="item-label">出行方式:</text>
        <view class="travel-mode-group">
          <label class="travel-mode-item">
            <radio value="bus" :checked="travelMode === 'bus'" />公交
          </label>
          <label class="travel-mode-item">
            <radio value="self-driving" :checked="travelMode === 'self-driving'" />自驾
          </label>
          <label class="travel-mode-item">
            <radio value="walking" :checked="travelMode === 'walking'" />步行
          </label>
        </view>
      </view>
      <view class="setting-item">
        <text class="item-label">显示推荐景点:</text>
        <switch :checked="showRecommendedSpots" @change="onShowRecommendedSpotsChange" />
      </view>
      <view class="setting-item">
        <text class="item-label">探索半径: {{ radius }}km</text>
        <slider
          :value="radius"
          @change="onRadiusChange"
          min="1"
          max="20"
          step="1"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 基础数据
      progress: 60,
      imgs: [
        '/static/city1.png',
        '/static/city2.jpg',
        '/static/city3.jpg',
        '/static/city4.jpg',
        '/static/city5.jpg',
      ],
      introList: [
        {
          title: '历史文化',
          content: '泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”。'
        },
        {
          title: '著名景点',
          content: '清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。'
        },
        {
          title: '特色文化',
          content: '拥有南音、木偶戏和闽南建筑等丰富的非物质文化遗产。'
        }
      ],
      
      // 音视频相关
      videoUrl: '/static/city-video.mp4',
      videoPoster: '/static/video-poster.jpg',
      audioUrl: '/static/city-music.mp3',
      audioContext: null,
      audioProgress: 0,
      isPlaying: false,
      
      // 设置相关
      travelMode: 'bus',
      showRecommendedSpots: true,
      radius: 12,
      
      // 省市区选择器相关
      cityData: [
        {
          name: '福建省',
          cities: [
            {
              name: '泉州市',
              districts: ['丰泽区', '鲤城区', '洛江区', '泉港区', '石狮市', '晋江市', '南安市', '惠安县', '安溪县', '永春县', '德化县']
            },
            {
              name: '福州市',
              districts: ['鼓楼区', '台江区', '仓山区', '马尾区', '晋安区', '长乐区', '福清市', '闽侯县', '连江县', '罗源县', '闽清县', '永泰县']
            },
            {
              name: '厦门市',
              districts: ['思明区', '湖里区', '集美区', '海沧区', '同安区', '翔安区']
            },
            {
              name: '漳州市',
              districts: ['芗城区', '龙文区', '龙海区', '漳浦县', '云霄县', '诏安县', '东山县', '平和县', '南靖县', '长泰区', '华安县']
            }
          ]
        },
        {
          name: '浙江省',
          cities: [
            {
              name: '杭州市',
              districts: ['上城区', '拱墅区', '西湖区', '滨江区', '萧山区', '余杭区', '富阳区', '临安区', '桐庐县', '淳安县', '建德市']
            },
            {
              name: '宁波市',
              districts: ['海曙区', '江北区', '北仑区', '镇海区', '鄞州区', '奉化区', '余姚市', '慈溪市', '象山县', '宁海县']
            }
          ]
        },
        {
          name: '广东省',
          cities: [
            {
              name: '广州市',
              districts: ['荔湾区', '越秀区', '海珠区', '天河区', '白云区', '黄埔区', '番禺区', '花都区', '南沙区', '从化区', '增城区']
            },
            {
              name: '深圳市',
              districts: ['罗湖区', '福田区', '南山区', '宝安区', '龙岗区', '盐田区', '龙华区', '坪山区', '光明区', '大鹏新区']
            }
          ]
        }
      ],
      cityRange: [[], [], []], // 选择器的选项数据
      selectedIndexes: [0, 0, 0], // 选中的索引
      selectedProvince: '福建省',
      selectedCity: '泉州市',
      selectedDistrict: '丰泽区'
    };
  },
  
  onLoad() {
    // 初始化省市区选择器数据
    this.initCityPicker();
  },
  
  onReady() {
    // 初始化音频上下文
    this.audioContext = uni.createInnerAudioContext();
    this.audioContext.src = this.audioUrl;
    
    // 监听音频播放进度
    this.audioContext.onTimeUpdate(() => {
      if (this.audioContext.duration) {
        this.audioProgress = Math.floor((this.audioContext.currentTime / this.audioContext.duration) * 100);
      }
    });
    
    // 监听音频播放结束
    this.audioContext.onEnded(() => {
      this.isPlaying = false;
      this.audioProgress = 0;
    });
  },
  
  methods: {
    // 初始化城市选择器
    initCityPicker() {
      // 提取省份列表
      const provinces = this.cityData.map(province => province.name);
      
      // 提取第一个省份的城市列表
      const cities = this.cityData[0].cities.map(city => city.name);
      
      // 提取第一个城市的区县列表
      const districts = this.cityData[0].cities[0].districts;
      
      // 设置选择器数据
      this.cityRange = [provinces, cities, districts];
    },
    
    // 处理选择器列变化
    handleColumnChange(e) {
      const { column, value } = e.detail;
      const newIndexes = [...this.selectedIndexes];
      newIndexes[column] = value;
      
      // 根据变化的列更新后续选项
      if (column === 0) {
        // 省份变化时，更新城市和区县
        const cities = this.cityData[value].cities.map(city => city.name);
        const districts = this.cityData[value].cities[0].districts;
        this.cityRange = [this.cityRange[0], cities, districts];
        newIndexes[1] = 0;
        newIndexes[2] = 0;
      } else if (column === 1) {
        // 城市变化时，更新区县
        const provinceIndex = newIndexes[0];
        const districts = this.cityData[provinceIndex].cities[value].districts;
        this.cityRange = [
          this.cityRange[0],
          this.cityRange[1],
          districts
        ];
        newIndexes[2] = 0;
      }
      
      // 更新选中索引
      this.selectedIndexes = newIndexes;
      
      // 更新显示文本
      this.updateSelectedText();
    },
    
    // 处理选择器确认选择
    handlePickerChange(e) {
      this.selectedIndexes = e.detail.value;
      this.updateSelectedText();
    },
    
    // 更新选中的省市区文本
    updateSelectedText() {
      const [pIndex, cIndex, dIndex] = this.selectedIndexes;
      this.selectedProvince = this.cityData[pIndex].name;
      this.selectedCity = this.cityData[pIndex].cities[cIndex].name;
      this.selectedDistrict = this.cityData[pIndex].cities[cIndex].districts[dIndex];
    },
    
    // 切换音频播放状态
    toggleAudio() {
      if (this.isPlaying) {
        this.audioContext.pause();
      } else {
        this.audioContext.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    
    // 出行方式变更
    onTravelModeChange(e) {
      this.travelMode = e.detail.value;
    },
    
    // 显示推荐景点开关变更
    onShowRecommendedSpotsChange(e) {
      this.showRecommendedSpots = e.detail.value;
    },
    
    // 探索半径变更
    onRadiusChange(e) {
      this.radius = e.detail.value;
    }
  },
  
  onUnload() {
    // 页面卸载时销毁音频上下文
    if (this.audioContext) {
      this.audioContext.destroy();
    }
  }
};
</script>

<style scoped>
.content {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.card {
  width: 94%;
  margin: 20rpx auto;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  background-color: #fff;
  padding: 36rpx;
  border: 1px solid #f5f5f5;
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-6rpx);
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.12);
}

.card-title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
  color: #333;
}

.card-subtitle {
  font-size: 32rpx;
  margin-bottom: 20rpx;
  display: block;
  color: #666;
}

.swiper-wrap {
  background-color: #eee;
  border-radius: 12rpx;
  overflow: hidden;
}

.swiper-img {
  width: 100%;
  height: 300rpx;
  object-fit: cover;
}

.intro-section {
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 30rpx;
  margin-bottom: 12rpx;
  color: #222;
  display: block;
}

.section-content {
  font-size: 28rpx;
  color: #555;
  line-height: 1.6;
}

.progress-info {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 12rpx;
  display: block;
}

.progress-row {
  display: flex;
  align-items: center;
}

progress {
  flex: 1;
  height: 20rpx;
}

.percent-text {
  font-size: 28rpx;
  color: #666;
  margin-left: 16rpx;
}

.city-content {
  background-color: #f5f5f5;
  padding: 14rpx 20rpx;
  border-radius: 12rpx;
  margin-top: 10rpx;
}

.city-picker {
  width: 100%;
}

.picker-display {
  font-size: 30rpx;
  padding: 10rpx 0;
  color: #333;
  line-height: 1.5;
}

.video-wrap {
  margin-bottom: 20rpx;
}

.video {
  width: 100%;
  height: 300rpx;
  border-radius: 12rpx;
}

.audio-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f5f5;
  padding: 20rpx;
  border-radius: 12rpx;
}

.audio-title {
  font-size: 32rpx;
  margin-bottom: 10rpx;
  color: #333;
}

.play-btn {
  width: 160rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: #007AFF;
  color: #fff;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
  font-size: 28rpx;
}

.audio-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.setting-item {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #eee;
}

.setting-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.item-label {
  font-size: 28rpx;
  color: #333;
  width: 120rpx;
}

.travel-mode-group {
  display: flex; /* 让子元素水平排列 */
  align-items: center;
}

.travel-mode-item {
  display: flex;
  align-items: center;
  margin-right: 40rpx; /* 每个选项之间的间距 */
}

radio {
  margin-right: 8rpx; /* 单选按钮和文字的间距 */
}
slider {
  width: 400rpx;
}
</style>